<template>
  <div class="ordered">
    <a-card
      :bordered="false"
      style="border-radius:8px;margin-top:10px;"
      :bodyStyle="{ padding: '14px 24px 22px' }">
      <div class="card_title">
        商品管理
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 12px;">
        <a-radio-group class="br4" v-model="type" style="margin-bottom:5px;" @change="statusChange">
          <a-radio-button value="-1">
            所有商品
          </a-radio-button>
          <a-radio-button :value="1">
            明天到期
          </a-radio-button>
          <a-radio-button :value="2">
            后天到期
          </a-radio-button>
        </a-radio-group>
        <div class="flex col_center flex_wrap">
          <a-select
            label-in-value
            style="width: 207px;margin-right: 5px;margin-bottom:5px;"
            placeholder="请选择组员"
            @change="handleChange"
            allowClear
            class="br4"
          >
            <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
              {{ v.user }}
            </a-select-option>
          </a-select>
          <a-range-picker
            :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
            format="YYYY-MM-DD HH:mm:ss"
            @change="timeChange"
            style="max-width:350px;margin-bottom:5px;margin-right: 5px;"
          >
          </a-range-picker>
          <a-input-search
            placeholder="标题关键词 / 商品ID / 店铺名"
            style="width: 224px;margin-bottom:5px;"
            class="br4"
            allowClear
            v-model="search"
            @search="onSearch"
          />
        </div>
      </div>
      <div class="activitytable">
        <a-table
          :columns="columns"
          :rowKey="activity => activity.pd_id"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pd_goodsImgUrl" slot-scope="text, row">
            <img :src="row.pd_goodsImgUrl" alt="" class="br4" style="width: 80px;height: 80px;">
          </div>
          <div slot="pd_subTitle" slot-scope="text, row">
            <div style="font-size: 13px;width:174px;">
              <div class="line-1"><a :href="'https://detail.tmall.com/item.htm?id='+row.pd_itemId" target="_blank">{{
                row.pd_subTitle }}</a></div>
              <div>商品ID：{{ row.pd_itemId }}</div>
              <div>店 铺 ：{{ row.pd_detailArr.shopName }}</div>
              <div>销 量 ：{{ row.pd_detailArr.sellCount }}</div>
              <div><span class="black blod">￥{{ row.pd_goodsCouponPrice }}</span> /
                <span>￥{{ row.pd_goodsPrice }}</span></div>
            </div>
          </div>
          <div slot="pd_writing" slot-scope="text, row">
            <div style="font-size: 13px;width: 190px">
              <div class="line-3">[<span class="a_blue">{{ row.pd_cateText }}</span>] {{ row.pd_writing }}</div>
              <div class="flex row_bet">
                <span class="a_blue">
                  <a
                    :href="'https://uland.taobao.com/quan/detail?sellerId='+row.pd_detailArr.shopId+'&activityId='+row.pd_couponActivityId"
                    target="_blank"
                    rel="noopener noreferrer">领券购买</a>
                </span>
                <a-tooltip placement="rightTop">
                  <template slot="title">
                    <div class="hoverbox">
                      <div :class="'hover'+row.pd_id">
                        <img :src="row.pd_superUrl" alt="" style="width: 70px;height: 70px;">
                        <div>{{ row.pd_subTitle }}</div>
                        <div>原价：[{{ row.pd_goodsPrice }}]元，券后价：[{{ row.pd_goodsCouponPrice }}]元</div>
                        <div class="line-1">领券：{{ row.pd_couponUrl }}</div>
                        <div class="line-1">抢购：https://detail.tmall.com/item.htm?id={{ row.pd_itemId }}</div>
                        <div class="line-2">{{ row.pd_writing }}</div>
                      </div>
                    </div>
                  </template>
                  <a-button
                    type="link"
                    ref="copy"
                    class="a_blue"
                    style="height: auto;padding: 0;line-height: 0"
                    @click="handleOk2(row)">生成文案
                  </a-button>
                </a-tooltip>
              </div>
            </div>
          </div>
          <div slot="pd_commissionRate" slot-scope="text, row">
            <div style="font-size: 13px;width: 84px">
              <div>佣金：{{ row.pd_commissionRate }}%</div>
              <div>服务：{{ row.pd_serviceRate }}%</div>
            </div>
          </div>
          <div slot="pd_couponUrl" slot-scope="text, row">
            <div style="font-size: 13px;width:158px;">
              <a :href="row.pd_couponUrl" target="_blank" rel="noopener noreferrer" style="display: block">
                <div class="coupon flex">
                  <span class="couponleft">{{ row.pd_couponName }}</span>
                  <span class="couponright">{{ row.pd_couponMoney }}</span>
                </div>
              </a>
              <div>数量/剩余：{{ row.pd_couponNum }}/{{ row.pd_couponSurplus }}</div>
              <div>起：{{ row.pd_couponStartTime }}</div>
              <div>止：{{ row.pd_couponEndTime }}</div>
            </div>
          </div>
          <div slot="pd_dtkState" slot-scope="text, row">
            <div
              :style="{
                color:row.pd_dtkState===9&&row.pd_hdkState===9&&row.pd_shzState===9?'#040404':'#39C15B',
                fontSize:'13px',
                width:'40px'
              }">{{ row.pd_dtkState===9&&row.pd_hdkState===9&&row.pd_shzState===9?'未提交':'已提交' }}
            </div>
          </div>
          <div slot="pd_issue_num" slot-scope="text, row">
            <div style="font-size: 13px;width:100px;">
              <div>有效单数：{{ row.pd_issue_num }}</div>
              <div>出服务费：￥{{ row.pd_issue_service_fee }}</div>
            </div>
          </div>
        </a-table>
        <iframe
          class="hidden"
          id="copyFrame"
          ref="copyFrame"
          name="copyFrame"
          frameborder="0"
          scrolling="no"
          src="/static/copy/copy.html"
        ></iframe>
      </div>
    </a-card>

  </div>
</template>

<script>
  import moment from 'moment'
  import { getGrounpInfo, getGroupTopGoods } from '@/api/teamApi'

  export default {
    name: 'Ordered',
    data () {
      return {
        moment,
        iframe: '',
        search: '',
        type: '-1',
        user_id: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        columns: [
          {
            title: '用户',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '提交时间',
            width: 104,
            dataIndex: 'pd_addTime',
            scopedSlots: {
              customRender: 'pd_addTime'
            }
          },
          {
            title: '图片',
            dataIndex: 'pd_goodsImgUrl',
            scopedSlots: {
              customRender: 'pd_goodsImgUrl'
            }
          },
          {
            title: '商品',
            dataIndex: 'pd_subTitle',
            scopedSlots: {
              customRender: 'pd_subTitle'
            }
          },
          {
            title: '文案',
            dataIndex: 'pd_writing',
            scopedSlots: {
              customRender: 'pd_writing'
            }
          },
          {
            title: '费率',
            dataIndex: 'pd_commissionRate',
            scopedSlots: {
              customRender: 'pd_commissionRate'
            }
          },
          {
            title: '优惠券',
            dataIndex: 'pd_couponUrl',
            scopedSlots: {
              customRender: 'pd_couponUrl'
            }
          },
          {
            title: '状态',
            dataIndex: 'pd_dtkState',
            scopedSlots: {
              customRender: 'pd_dtkState'
            }
          },
          {
            title: '备注',
            dataIndex: 'pd_mark',
            scopedSlots: {
              customRender: 'pd_mark'
            }
          },
          {
            title: '出单数据',
            dataIndex: 'pd_issue_num',
            scopedSlots: {
              customRender: 'pd_issue_num'
            }
          }
        ],
        activity: [
          // {
          //   pd_id: 173160, // 自增id
          //   pd_itemId: '50013870', // 商品id
          //   pd_goodsImgUrl: 'https://img.alicdn.com/imgextra/i1/2507082560/O1CN014M6ESG1UmWV3DQCfi_!!2507082560.jpg', // 主图url
          //   pd_subTitle: '测试短标题', // 短标题
          //   pd_goodsPrice: '50.00', // 商品原价
          //   pd_goodsCouponPrice: '40.00', // 商品优惠价
          //   pd_commissionRate: '20', // 佣金比例
          //   pd_serviceRate: '10', // 服务费率
          //   pd_mark: '备注', // 备注
          //   pd_couponActivityId: 'be525d3795f647848b877b39f896fa41', // 优惠卷id
          //   pd_couponUrl: 'https://uland.taobao.com/quan/detail?sellerId=2206619857501&activityId=be525d3795f647848b877b39f896fa41&pid=mm_0_0_0', // 优惠卷链接
          //   pd_superUrl: 'https://img.alicdn.com/imgextra/i1/2507082560/O1CN014M6ESG1UmWV3DQCfi_!!2507082560.jpg', // 营销图url
          //   pd_writing: '商品文案', // 商品文案
          //   pd_dtkState: 9, // 是否提交（pd_dtkState，pd_hdkState，pd_shzState都是9是未提交，否则已提交）
          //   pd_hdkState: 9,
          //   pd_shzState: 9,
          //   pd_issue_num: 0, // 出单数量
          //   pd_issue_service_fee: '0.00', // 服务费
          //   si_shopName: '钻盾饰品旗舰店', // 店铺名称
          //   pd_couponStartTime: '', // 优惠卷开始时间
          //   pd_couponEndTime: '', // 优惠卷结束时间
          //   classc: '家居'
          // }
        ],
        loading: false,
        copyBtn: null,
        handleOk: null,
        classList: [
          // {
          //   id: 54, // 自增id
          //   user: '梁俊霞'// 昵称
          // }
        ]
      }
    },
    computed: {},
    created () {
      this.getGroupTopGoods(1, 15)
      this.getGrounpInfo()
    },
    mounted () {

    },
    methods: {
      getGrounpInfo () {
        getGrounpInfo().then(res => {
          console.log(res)
          if (res.code === 200) {
            this.classList = res.data
          }
        }).catch(err => {
          console.log(err)
        })
      },
      timeChange (dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        if (dates.length === 0) {
          this.start = null
          this.end = null
        } else {
          this.start = dates[0].format('YYYY-MM-DD HH:mm:ss')
          this.end = dates[1].format('YYYY-MM-DD HH:mm:ss')
          console.log(this.start, this.end)
        }
        this.getGroupTopGoods(1, 15, this.type, this.search)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
        // this.pass = str
      },
      handleChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.user_id = ''
        } else {
          this.user_id = value.key
        }
        this.getGroupTopGoods(1, 15, this.type, this.search)
      },
      handleOk2 (val) {
        // console.log(val)
        const obj1 = window.frames['copyFrame']// 获得对应iframe的window对象
        obj1.row = val
        obj1.dorow()
        this.$message.success('复制成功!')
      },
      goedit (row, isreor) {
        this.$router.push({
          path: '/attractinvest/ordered/typeinManage',
          query: {
            item: encodeURIComponent(JSON.stringify(row)),
            isreorder: isreor
          }
        })
      },
      getGroupTopGoods (page, pagesize, status, search) {
        this.loading = true
        getGroupTopGoods({
          page: page,
          pagesize: pagesize,
          type: status,
          start: this.start,
          end: this.end,
          user_id: this.user_id,
          search: search
        }).then(res => {
          console.log(res)
          var arr = res.data.data
          for (let i = 0; i < arr.length; i++) {
            arr[i].pd_detailArr = JSON.parse(arr[i].pd_detailArr)
          }
          for (const i in arr) {
            if (arr[i].pd_superUrl.indexOf('img.letuilm.com') !== -1) {
              arr[i].pd_superUrl = arr[i].pd_superUrl.replace(/img.letuilm.com/g, `//img.letuilm.com`)
            }
            if (arr[i].pd_superUrl.indexOf('public/static') !== -1) {
              arr[i].pd_superUrl = arr[i].pd_superUrl.replace(
                /\/public\/static/g,
                `//zsxt.letuilm.com/public/static`
              )
            }
          }
          this.activity = arr
          this.loading = false
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.count
          this.pagination = pagination
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getGroupTopGoods(params.page, 15, this.type, this.search)
      },
      onSearch (value) {
        console.log(value)
        if (value !== '') {
          this.getGroupTopGoods(1, 15, this.type, value)
        }
      },
      statusChange (e) {
        // console.log(this.status)
        if (this.type === '-1') {
          this.getGroupTopGoods(1, 15, null, this.search)
        } else {
          this.getGroupTopGoods(1, 15, this.type, this.search)
        }
      }
    }
  }
</script>
<style lang='less' scoped>
  .ordered {
    /deep/.ant-select-selection{
      border-radius: 4px;
    }
    /deep/.ant-input{
      border-radius: 4px;
    }
    /deep/.ant-btn{
      border-radius: 4px;
    }
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .a_blue {
      color: #00A0E9;
      cursor: pointer;
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }

    }

    .activitytable {
      font-size: 13px;
    }
  }
</style>
